<template>
  <div class="order-confirm">
    <!-- 1.标题区域 -->
    <order-header title="确认订单">
      <span slot="desc">温馨提示： 请填写收获地址</span>
    </order-header>
    <!-- 2.内容区域 -->
    <div class="container">
      <!-- 收货地址区域 -->
      <div class="address">
        <h2>收货地址</h2>
        <ul class="list">
          <li
            class="item"
            v-if="addressList.length"
            v-for="(item, index) in addressList"
            :key="item.id"
            @click="activeClick(index, item)"
            :class="{ activeaddress: currentIndex === index }"
          >
            <div class="name">{{ item.consigneeName }}</div>
            <div class="phone">{{ item.consigneePhone }}</div>
            <div class="pos">
              {{item.address}}
            </div>
            <div class="control">
              <!-- <span class="delete" @click="deteleAddress(item.id)"></span> -->
              <span class="setting" @click="settingAddress"></span>
            </div>
          </li>
          <!-- <li class="addnew" @click="addAddress">
            <div class="icon-add"></div>
            <div>添加新地址</div>
          </li> -->
        </ul>
      </div>
      <!-- 商品列表区域 -->
      <div class="goods">
        <h2>商品</h2>
        <ul class="goodslist">
          <li class="item" v-for="(item, index) in goodList" :key="index">
            <div class="goods-img">
              <img :src="item.coverImg" alt="" />
            </div>
            <div class="goods-name">{{ item.goodsName }}</div>
            <div class="goods-desc">{{ item.describeTxt }}</div>
            <div class="goods-count">
              {{ item.sellPrice }}x{{ curGoods[index].amount }}
            </div>
            <div class="goods-price">{{ curGoods[index].totalMoney }}元</div>
          </li>
        </ul>
      </div>
      <!-- 配送方式区域 -->
      <div class="post">
        <h2>配送方式</h2>
        <span>包邮</span>
      </div>
      <!-- 发票区域 -->
      <div class="fapiao">
        <h2>发票</h2>
        <span>电子发票</span>
        <span>个人</span>
      </div>
      <!-- 结算区域 -->
      <div class="jiesuan">
        <div class="totalcount">
          商品件数：<span>{{ curGoods.reduce((total, cur) => total += cur.amount, 0)}}件</span>
        </div>
        <div class="totalprice">
          商品总价：<span>{{ curGoods.reduce((total, cur) => total += cur.totalMoney, 0) }}元</span>
        </div>
        <div class="discount">优惠活动：<span>0元</span></div>
        <div class="other">运费：<span>0元</span></div>
        <div class="totalpay">
          应付总额：<span>{{ curGoods.reduce((total, cur) => total += cur.totalMoney, 0) }}元</span>
        </div>
      </div>
      <!-- 返回购物车和结算按钮区域 -->
      <div class="btn">
        <div class="backbtn" @click="backToCart">返回购物车</div>
        <div class="paybtn" @click="orderSubmit">去结算</div>
      </div>
    </div>
  </div>
</template>

<script>
import OrderHeader from "components/orderheader/OrderHeader";
import Model from "components/model/Model";
import { mapState } from 'vuex';

export default {
  name: "orderConfirm",
  components: {
    OrderHeader,
    Model,
  },
  data() {
    return {
      good: {},
      goodList: [],
      addressList: [], //地址列表
      cartList: [], //购物车全部商品列表
      cartTotalPrice: 0, //购物车总金额
      isShowDelModel: false, //是否显示删除地址模态框
      isShowAddModle: false, //是否显示添加地址模态框
      isShowEditModle: false, //是否显示编辑地址模态框
      controlItemId: "", //当前选中的/正在操作的地址id
      checkItem: {}, //选中的地址对象
      Name: "", //收货姓名
      Mobile: "", //收货电话
      // Province: "", //收货省份
      // City: "", //收货城市
      // District: "", //收货区域
      // Address: "", //收货地址
      // Zip: "", //收货邮编
      currentIndex: 0, //当前选中的收货地址索引
    };
  },
  computed: {
    ...mapState(['user', 'curGoods']),
    // 购物车中选中需要结算的商品列表
    // toPayGoodsList() {
    //   let arr = [];
    //   arr = this.cartList.filter((item) => {
    //     return item.productSelected == true;
    //   });
    //   return arr;
    // },
  },
  mounted() {
    // 获取用户收货地址列表
    this.getAddressList();
    // 获取购物车列表
    this.getCartList();
    this.getShop()
  },
  methods: {
    /**
     * 获取商品信息
     */
    getShop () {
      this.curGoods.forEach(item => {
        let query = {
          goodsId: item.id
        }
        this.$api.shop.getShop(query).then(res => {
          if (res.code === 200) {
            this.goodList.push(res.data)
          }
        })
      })
    },
    // 1.获取地址列表数据
    getAddressList() {
    },
    // 2.获取购物车列表数组
    getCartList() {
    },
    // 3.编辑收货地址按钮点击
    settingAddress() {
      // 先将当前正在操作的这个地址对象的id保存在data中
      // this.controlItemId = item.id;
      // this.isShowEditModle = true;
      // this.Name = item.consigneeName;
      // this.Mobile = item.consigneePhone;
      this.$router.push({
        path: '/address'
      })
    },
    CloseEditClick() {
      this.isShowEditModle = false;
    },
    SureEditClick() {
      // 关闭模态框
      this.isShowEditModle = false;
    },
    // 4.添加地址按钮点击
    addAddress() {
      // 显示弹框
      this.isShowAddModle = true;
    },
    // 点击取消新增收货地址
    CloseAddClick() {
      this.isShowAddModle = false;
    },
    // 5.删除地址按钮点击
    deteleAddress(id) {
      this.isShowDelModel = true;
      this.controlItemId = id;
    },

    // 点击确认删除地址
    SureDelClick() {
    },
    // 点击弹框的取消按钮
    CloseDelClick() {
      this.isShowDelModel = false;
    },

    // 6.选中要收货的地址
    activeClick(index, item) {
      this.currentIndex = index;
      // 根据索引保存当前选中地址的id
      this.controlItemId = this.addressList[this.currentIndex].id;
    },
    // 7.点击跳转购物车
    backToCart() {
      this.$router.push("/cart");
    },
    /**
     * 获取收货地址
     */
    getAddressList () {
      let query = {
        userId: this.user.id
      }
      this.$api.cart.getAddressList(query).then(res => {
        if (res.code === 200) {
          this.addressList = res.data
        }
      })
    },
    // 8.点击结算按钮
    orderSubmit() {
      // 判断用户是否添加了地址
      if (this.addressList.length === 0) {
        this.$message.error("请添加收货地址！");
      }
      // let selects = this.addressList.filter(item => item.id === this.good.consigneeAddress)[0]
      let orderList = this.curGoods.map(item => {
        return {
          shoppingId: item.shoppingId,
          userId: this.user.id,
          goodsSerialNumber: item.goodsSerialNumber,
          amount: item.amount,
          totalMoney: item.totalMoney,
          consigneeAddress: this.addressList[this.currentIndex].address,
          consigneePhone: this.addressList[this.currentIndex].consigneePhone,
          consigneeName: this.addressList[this.currentIndex].consigneeName
        }
      })
      let params = {
        orderList: orderList
      }
      this.$api.cart.epay(params).then(res => {
        if (res.code === 200) {
          if (res.data.code) {
            this.$router.replace({
              path: '/order/pay',
              query: {
                orderId: res.data.code,
              }
            })
          } else {
            this.$message({
              type: 'warning',
              message: res.msg
            })
          }
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style scoped>
/* 表单区域样式 */
.add-form .item {
  margin-bottom: 15px;
  font-size: 14px;
}
.add-form .item input {
  width: 270px;
  height: 30px;
  line-height: 30px;
  padding-left: 15px;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
  outline: none;
}
.add-form .item select {
  margin-right: 15px;
  border: 1px solid #e5e5e5;
  width: 90px;
  height: 30px;
  line-height: 30px;
  color: #666;
}
.add-form .item input:first-child {
  margin-right: 20px;
}
.add-form .item textarea {
  width: 98%;
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid #e5e5e5;
  resize: none;
  line-height: 30px;
}

/* 确认订单外层样式 */
.order-confirm {
  background-color: #fff;
}
/* 包裹区域 */
.container {
  margin-top: 20px;
  padding: 30px 0;
  box-sizing: border-box;
  background-color: #fff;
}

/* 结算区域样式 */
.jiesuan {
  margin-top: 20px;
  text-align: right;
  border-bottom: 2px solid #e5e5e5;
  padding-bottom: 20px;
}
.jiesuan div {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
}
.jiesuan div span {
  display: inline-block;
  color: #ff6600;
  width: 150px;
}
.totalpay {
  margin-top: 15px;
}
.totalpay span {
  font-size: 24px;
  font-weight: 600;
}
/* 底部确认订单样式 */
.btn {
  margin-top: 30px;
  text-align: right;
}
.backbtn {
  display: inline-block;
  width: 120px;
  height: 40px;
  background-color: #fff;
  text-align: center;
  line-height: 40px;
  color: #666;
  cursor: pointer;
  margin-right: 10px;
}
.paybtn {
  display: inline-block;
  width: 120px;
  height: 40px;
  background-color: #ff6600;
  text-align: center;
  line-height: 40px;
  color: #fff;
  cursor: pointer;
}
/* 地址 发票样式 */
.post {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.post h2 {
  margin-right: 40px;
}
.post span {
  margin-right: 5px;
  color: #ff6600;
}
.fapiao {
  margin-top: 20px;
  display: flex;
  align-items: center;
}
.fapiao h2 {
  margin-right: 75px;
}
.fapiao span {
  margin-right: 5px;
  color: #ff6600;
}
/* 商品展示列表样式 */
.goods {
  margin-top: 20px;
}
.goods h2 {
  border-bottom: 2px solid #e5e5e5;
  padding-bottom: 5px;
}
.goods .item {
  height: 100px;
  border-bottom: 2px solid #e5e5e5;
  line-height: 100px;
  display: flex;
  align-items: center;
  position: relative;
}
.goods-img {
  width: 60px;
  margin: 0 10px;
}
.goods-img img {
  width: 100%;
  position: relative;
  top: -5px;
}
.goods-name {
  font-size: 18px;
  margin-right: 10px;
}
.goods-desc {
  font-size: 18px;
}
.goods-count {
  font-size: 18px;
  width: 80px;
  position: absolute;
  left: 900px;
}
.goods-price {
  font-size: 18px;
  color: #ff6600;
  white-space: nowrap;
  position: absolute;
  right: 50px;
}

/* 地址展示区域样式 */
.address h2 {
  padding: 30px 0 20px 0;
}
.address .list {
  display: flex;
  flex-wrap: wrap;
}
.address .item {
  width: 270px;
  height: 180px;
  border: 2px solid #e5e5e5;
  margin-right: 15px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}
.activeaddress {
  border: 3px solid #ff6600 !important;
}
.addnew {
  width: 270px;
  height: 180px;
  border: 2px solid #e5e5e5;
  margin-right: 15px;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #dddcdd;
  cursor: pointer;
}
.addnew .icon-add {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: url("/imgs/icon-add.png") no-repeat center;
  background-size: 15px;
  background-color: #dddcdd;
  margin-bottom: 15px;
}
.item .name {
  font-size: 18px;
}
.item .phone {
  font-size: 14px;
  margin-top: 20px;
}
.item .pos {
  font-size: 14px;
}
.item .control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  width: 230px;
  bottom: 10px;
}
.item .control span.delete {
  width: 20px;
  height: 20px;
  background: url("/imgs/icon-close.png") no-repeat center;
  background-size: 20px;
  cursor: pointer;
}
.item .control span.setting {
  width: 20px;
  height: 20px;
  background: url("/imgs/icon-setting.png") no-repeat center;
  background-size: 20px;
  cursor: pointer;
}
</style>
